<template>
  <view class="berth-disable-item">
    <view class="card">
      <!-- 卡片头部 -->
      <view class="card-header">
        <text class="berth-number">泊位号：{{ disable?.berthNumber || '-' }}</text>
        <view class="status-tag" :class="getStatusClass(disable?.status)">
          <text>{{ getStatusText(disable?.status) }}</text>
        </view>
      </view>
      
      <!-- 卡片内容 -->
      <view class="card-content">
        <view class="info-row">
          <text class="label">停车场：</text>
          <text class="value">{{ disable?.parkingName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">申请时间：</text>
          <text class="value">{{ disable?.createTime || '-' }}</text>
        </view>
        <view class="info-row" v-if="disable?.processTime">
          <text class="label">审核时间：</text>
          <text class="value">{{ disable?.processTime }}</text>
        </view>
        <view class="info-row" v-if="disable?.reason">
          <text class="label">申请原因：</text>
          <text class="value">{{ disable?.reason }}</text>
        </view>
        <view class="info-row" v-if="disable?.remark">
          <text class="label">备注：</text>
          <text class="value">{{ disable?.remark }}</text>
        </view>
      </view>
      
      <!-- 卡片底部操作 -->
      <view class="card-footer">
        <view class="action-buttons">
          <up-button type="info" size="small" @click="handleView">查看详情</up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义props
const props = defineProps({
  disable: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['view'])

// 处理查看详情
const handleView = () => {
  emit('view', props.disable)
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    pending: 'status-pending',
    success: 'status-success',
    danger: 'status-danger'
  }
  return statusMap[status] || 'status-pending'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    success: '已通过',
    danger: '已拒绝'
  }
  return statusMap[status] || '待审核'
}
</script>

<style lang="scss" scoped>
.berth-disable-item {
  margin-bottom: 20rpx;
}

.card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.berth-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.status-tag {
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  
  &.status-pending {
    background-color: #fff7e6;
    color: #fa8c16;
  }
  
  &.status-success {
    background-color: #f6ffed;
    color: #52c41a;
  }
  
  &.status-danger {
    background-color: #fff1f0;
    color: #f5222d;
  }
}

.card-content {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.label {
  color: #666666;
  min-width: 160rpx;
}

.value {
  color: #333333;
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}
</style>